<div class="layui-card layadmin-header" style="height: auto;">
	<div class="layui-breadcrumb" lay-filter="breadcrumb">
		<a lay-href="">概览</a>
		<a><cite>接入监控</cite></a>
	</div>
	<div class="luomi-title">接入监控</div>
</div>


<div class="search">
	<div class="layui-form " lay-filter="app-content-list">
		<div class="layui-form-item">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<input type="text" name="serialNumber" placeholder="请输入网关ID" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<div class="layui-input-inline">
					<input type="text" name="description" placeholder="请输入网关备注" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<input type="button" lay-submit lay-filter="LAY-gateway-sreach-submit" value="搜索" class="layui-btn">	
			</div>
		</div>
	</div>
</div>


<div id="item"></div>


 <div class="layui-card" id="page" style="margin: 20px;"></div>



<script type="text/html" id="test">
    <div id="content-item">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space25">
                {{# layui.each(d,function(index,item){ }}
                <div class="layui-col-xm1 layui-col-md3 layui-col-sm6">
                    <div class="layui-card" style="padding: 10px;">
                        <div class="content" >
                            <div class="content-title" style="display: flex;align-items: center;">
                                <img style="margin: 10px;" width="40" height="40" src="{{item.image || layui.setter.base +'style/res/gateway.png'}}">
                                <div class="content-title-content" style="display: flex;flex-direction: column;">
                                    <div style="margin-bottom: 10px;" class="layui-elip">ID:{{item.serialNumber}}</div>
                                    <div style="font-weight: 600;">IoT Gateway lite
                                        {{# if(item.gwStatus)  { }}
                                        <span style="margin-left: 30px;" class="layui-badge-dot layui-bg-green"></span>
                                        <span>在线</span>
                                        {{# } else { }}
                                        <span style="margin-left: 30px;" class="layui-badge-dot"></span>
                                        <span>离线</span>
                                        {{# }}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
    
                        <div style="display: flex;justify-content: space-between;">
                            <div>在线设备</div>
                            <div>
                          <span  style="border-right: 1px solid #ccc;padding-right: 5px;">{{item.onLine}}</span>
                            <span  class="a-blue" onclick=look("{{item.serialNumber}}",'OnLine',{{item.onLine}}) style="cursor: pointer;">详情</span>
                            </div>
                        </div>
                        <hr>
                        <div style="display: flex;justify-content: space-between;">
                            <div>离线设备</div>
                            <div>
                          <span  style="border-right: 1px solid #ccc;padding-right: 5px;">{{item.offLine}}</span>
                            <span  class="a-blue" onclick=look("{{item.serialNumber}}",'OffLine',{{item.offLine}}) style="cursor: pointer;">详情</span>
                            </div>
                        </div>
                        <hr>
                        <div style="color:#A9A9A9 ;">
                            <span>备注: {{item.description || '/'}}</span>
                            <i class="layui-icon  layui-icon-edit" onclick=edit("{{item.serialNumber}}","{{item.description}}")></i>
                        </div>
                    </div>
    
                   
                </div>
                {{#}) }}
            </div>
        </div>
    </div>
</script>


<script>
    layui.use(['admin', 'laytpl', 'form', 'laypage', 'layer', 'view', 'setter', 'upload'], function() {
    var $ = layui.$,
        admin = layui.admin,
        table = layui.table,
        laytpl = layui.laytpl,
        element = layui.element,
        form = layui.form,
        laypage = layui.laypage,
        layer = layui.layer,
        view = layui.view,
        setter = layui.setter,
        upload = layui.upload;

        // 搜索
        form.on('submit(LAY-gateway-sreach-submit)',function(data){
            var field = data.field;
            getDate('search',1,2,field.serialNumber,field.description)
        })

        // 详细
        look = function(serialNumber,type,number){
            if(number){
                console.log(serialNumber,type,number);
                admin.popup({
                    title:'设备详情',
                    area:['1000px','600px'],
                    id:'LAY-popup-gateway-look',
                    success:function(layero,index){
                        view(this.id).render('/gateway/gatewayLook',{serialNumber,type})
                    }
                })
            }else{
                layer.msg('暂无数据')
            }
        }


        // 获取列表数据
        getDate = function(type,pageindex,pagesize,serialNumber,description){
            admin.req({
                url:setter.url + '/gateway/getGatewayRealMessage',
                type:'post',
                data:{
                    pageindex,
                    pagesize,
                    serialNumber,
                    description
                },
                done:function(res){
                   if(res.code === '200'){
                        var scriptHtml = document.getElementById('test').innerHTML;
                        var item = document.getElementById('item')
                        laytpl(scriptHtml).render(res.rows,function(html){
                            item.innerHTML = html;
                        })
                   }
                   form.render()
                   if(type != 'page'){
                       getPage(res.count)
                   }
                   if(res.count == 0){
                       layer.msg('为查询到结果')
                   }
                }
            })
        }


        getDate('load',1,2,null,null);

        // 修改备注功能
        edit = function(serialNumber,description){
            admin.popup({
                title:'修改备注',
                area:['500px','300px'],
                id:'LAY-popup-gateway-edit',
                success:function(layero,index){
                    view(this.id).render('gateway/gatewayEdit',{description})
                    .done(function() {
                            form.on('submit(gatewayEdit-edit-submit)',function(data){
                                var field = data.field;
                                console.log(field);
                                admin.req({
                                    url:setter.url + '/gateway/updateGatewayDescription',
                                    data:{
                                        ...field,
                                        serialNumber
                                    },
                                    type:'post',
                                    done:function(res){
                                        layer.msg(res.message);
                                        parent.location.reload();
                                        layer.close(index)
                                    }
                                })
                            })
                        })
                }
            })
        }


        // 翻页功能
        getPage  = function(count) {
            laypage.render({
            elem:'page',
            count,
            limit:2,
            limits:[2,5,10,15,20],
            layout:['count','prev','page','next','limit','skip'],
            jump:function(obj,first){
                if(!first){
                    getDate('page',obj.curr,obj.limit,null,null)
                }
            }

        })
        }
    })
</script>


